<template>
  <div class="main-context">
    <project-item ref="projectItem" :is-json="true" @currentJsonChange="currentJsonChange" @currentProjectChange="currentProjectChange" />
    <div class="flex dashboard" style="margin-top: -20px;">
      <echarts
        ref="yield"
        style="width:97%;margin:10px;box-shadow: rgba(0, 0, 0, 0.5) 2px 2px 2px 0px;"
        :height="'350px'"
        :option="Yield"
        class="radius"
      />
      <div class="event-div">
        <echarts
          ref="event"
          style="width:100%;margin:10px;"
          :width="'100%'"
          :height="'550px'"
          :option="Event"
          class="radius"
        />
        <echarts
          ref="event1"
          style="width:100%;margin:10px;"
          :width="'100%'"
          :height="'350px'"
          :option="Event1"
          class="radius"
        />

        <div class="event-div-num">
          <div class="event-div-left">
            <echarts
              ref="event2"
              style="width:100%;margin:10px;"
              :width="'100%'"
              :height="'350px'"
              :option="Event2"
              class="radius"
            />
          </div>
          <div class="event-div-right">
            <span class="svg-container">
              <svg-icon icon-class="rectangle1" />PH_EVENT
            </span>
            <span class="svg-container">
              <svg-icon icon-class="rectangle2" />DATALOG_EVENT
            </span>
            <span class="svg-container">
              <svg-icon icon-class="rectangle3" />LOT_START_EVENT
            </span>
            <span class="svg-container">
              <svg-icon icon-class="rectangle4" />TEST_PROGRAM_EVENT
            </span>
            <span class="svg-container">
              <svg-icon icon-class="rectangle5" />RECIPE_EVENT
            </span>
          </div>
        </div>
      </div>

      <echarts
        ref="SiteEnable"
        style="width:97%;margin:10px;box-shadow: rgba(0, 0, 0, 0.5) 2px 2px 2px 0px;"
        :option="SiteEnable"
        class="radius"
      />
      <div v-if="isTemp" class="temp-div">
        <div class="temp-div-head">
          <span class="svg-container">
            <svg-icon icon-class="line2" />µ+3δ
          </span>
          <span class="svg-container">
            <svg-icon icon-class="line2" />µ-3δ
          </span>
          <span class="svg-container">
            <svg-icon icon-class="line3" />SETUP
          </span>
          <span class="svg-container">
            <svg-icon icon-class="line4" />平均值
          </span>
        </div>

        <div class="temp-content">
          <echarts
            v-for="(tempItem,index) in Object.entries(TempData)"
            :key="index"
            ref="temp"
            style="width:50%;border-radius: 8px;"
            class="radius"
          />
        </div>
      </div>
      <div v-if="isKpa" class="kpa-div">
        <echarts
          ref="KpaLine"
          style="width:70%;"
          :option="KpaLine"
          class="radius"
        />
        <echarts
          ref="KpaPie"
          style="width:30%;"
          :option="KpaPie"
          class="radius"
        />
      </div>
      <echarts
        ref="TestTime"
        style="width:97%;margin:10px;box-shadow: rgba(0, 0, 0, 0.5) 2px 2px 2px 0px;"
        :height="'550px'"
        :option="TestTime"
        class="radius"
      />
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import echarts from '@/components/echarts/echarts.vue'
import { SiteEnable } from './options-siteEnable.js'
import { temp } from './options-temp.js'
import { Event } from './options-event.js'
import { Event1, Event2 } from './options-event1.js'
import { KpaPie, KpaLine } from './options-kpa.js'
import { TestTime } from './options-testTime.js'
import { Yield } from './options-yield.js'
import projectItem from '@/views/companents/projectItem/other_index.vue'

const colors = {
  'LEVEL_STARTED': '#ADC25D',
  'LEVEL_STARTED_LOT': '#ADC25D',
  'PH_CONNECTING_ABORTED': '#D5665C',
  'PH_DISCONNECTING_ABORTED': '#D5665C',
  'PH_LOT_LOADING_ABORTED': '#D5665C',
  'PH_LOT_UNLOADING_ABORTED': '#D5665C',
  'PH_WAFER_LOADING_ABORTED': '#D5665C',
  'PH_WAFER_UNLOADING_ABORTED': '#D5665C',
  'PH_CASSETTE_LOADING_ABORTED': '#D5665C',
  'PH_CASSETTE_UNLOADING_ABORTED': '#D5665C',
  'PH_DEVICE_LOADING_ABORTED': '#D5665C',
  'PH_DEVICE_BINNING_ABORTED': '#D5665C',
  'PH_PAUSING_ABORTED': '#D5665C',
  'PH_RESUMING_ABORTED': '#D5665C',
  'PH_DRIVER_FUNCTION_EXECUTION_ABORTED': '#D5665C',
  'PH_DRIVER_ READING_STATUS_BYTE_ABORTED': '#D5665C',
  'PH_COMMAND_EXECUTION_ABORTED': '#D5665C',
  'DATALOG_FILE_PAUSED': '#EEF175',
  'TESTPROGRAM_ACTIVATION_ABORTED': '#9F83FC',
  'TESTPROGRAM_LOADING_ABORTED': '#9F83FC',
  'TESTPROGRAM_BINDING_ABORTED': '#9F83FC',
  'TESTPROGRAM_STARTING_ABORTED': '#9F83FC',
  'TESTPROGRAM_STOPPING_ABORTED': '#9F83FC',
  'RECIPE_EXEC_ABORTED': '#2EC7C9',
  'RECIPE_HOLD_STARTED': '#2EC7C9',
  'RECIPE_PAUSE_STARTED': '#2EC7C9',
  'RECIPE_EXEC_STARTED': '#2EC7C9'
}

export default {
  name: 'Dashboard',
  components: {
    echarts,
    projectItem
  },
  data() {
    return {
      KpaPie,
      KpaLine,
      SiteEnable,
      Event,
      Event1,
      Event2,
      temp,
      alreadyTestOp: {},
      projectId: '',
      jsonCode: '',
      TempData: [],
      TestTime,
      Yield,
      isKpa: true,
      isTemp: true
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  mounted() {
    this.initChart()
  },
  // async created() {
  //   // this.projectId = this.$store.getters.projectId
  //   // this.jsonCode = this.$store.getters.jsonCode
  //   // console.log('projectId == ' + this.$store.getters.projectId)
  //   // console.log('jsonCode == ' + this.$store.getters.jsonCode)
  //   this.initChart()
  // },
  methods: {
    initChart(refresh) {
      this.projectId = this.$store.getters.projectId
      this.jsonCode = this.$store.getters.jsonCode
      console.log('projectId == ' + this.$store.getters.projectId)
      console.log('jsonCode == ' + this.$store.getters.jsonCode)
      this.$nextTick(() => {
        if (!refresh) {
          this.$refs.projectItem.init(this.projectId)
        }
        this.getEvent()
        this.getEvent1()
        this.getTemp()
        this.getSiteEnable()
        this.getKpa()
        this.getTestTime()
        this.getYield()
      })
    },
    currentProjectChange() {
      this.initChart(true)
    },
    currentJsonChange() {
      this.initChart(true)
    },
    async getEvent() {
      const params = {
        'projectId': this.projectId,
        'jsonCode': this.jsonCode
      }
      this.$refs.event.chart.showLoading()
      const data = await this.$fetchData(this.$api.JsonDashController.getVitalEvents, params, 'post')
      this.Event.dataset.source = data
      const excepteds = data.map((item) => item.excepted)
      this.Event.series[1].data = excepteds
      this.$refs.event.initChart(this.Event)

      this.$refs.event.chart.on('mouseover', function(params) {
        if (params.componentType === 'xAxis') {
          var extension = document.getElementById('extension')
          if (!extension) {
            var div = document.createElement('div')
            div.setAttribute('id', 'extension')
            div.style.display = 'block'
            document.querySelector('html').appendChild(div)
          }
        }
        if (params.componentType === 'xAxis') {
          var elementDiv = document.querySelector('#extension')
          // 设置悬浮文本的位置以及样式
          var elementStyle =
                  'position: absolute;z-index: 99999;color: #fff;font-size: 12px;padding: 5px;display: inline;border-radius: 4px;background-color: #303133;box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 8px'
          elementDiv.style.cssText = elementStyle
          elementDiv.innerHTML = params.value
          document.querySelector('html').onmousemove = function(event) {
            var elementDiv = document.querySelector('#extension')
            var xx = event.pageX - 10
            var yy = event.pageY + 15
            elementDiv.style.top = yy + 'px'
            elementDiv.style.left = xx + 'px'
          }
        }
      })
      this.$refs.event.chart.on('mouseout', function(params) {
        // 注意这里，我是以X轴显示内容过长为例，如果是y轴的话，需要改为yAxis
        if (params.componentType === 'xAxis') {
          var elementDiv = document.querySelector('#extension')
          elementDiv.style.cssText = 'display:none'
        }
      })
      this.$refs.event.chart.hideLoading()
    },
    async getEvent1() {
      const data = {
        '0': [
          {
            'excepted': '0',
            'actual': '1',
            'eventName': 'RECIPE_EXEC_STARTED'
          },
          {
            'excepted': '0',
            'actual': '2',
            'eventName': 'LEVEL_STARTED_LOT'
          },
          {
            'excepted': '0',
            'actual': '2',
            'eventName': 'PH_CONNECTING_ABORTED'
          }
          // {
          //   'excepted': '0',
          //   'actual': '2',
          //   'eventName': 'PH_DISCONNECTING_ABORTED'
          // },
          // {
          //   'excepted': '0',
          //   'actual': '2',
          //   'eventName': 'PH_LOT_LOADING_ABORTED'
          // }
        ],
        // '3': [
        //   {
        //     'excepted': '0',
        //     'actual': '1',
        //     'eventName': 'TESTPROGRAM_BINDING_ABORTED'
        //   },
        //   {
        //     'excepted': '0',
        //     'actual': '2',
        //     'eventName': 'PH_COMMAND_EXECUTION_ABORTED'
        //   },
        //   {
        //     'excepted': '0',
        //     'actual': '2',
        //     'eventName': 'DATALOG_FILE_PAUSED'
        //   }
        // ],
        '18': [
          {
            'excepted': '0',
            'actual': '1',
            'eventName': 'RECIPE_EXEC_STARTED'
          },
          {
            'excepted': '0',
            'actual': '1',
            'eventName': 'LEVEL_STARTED'
          },
          {
            'excepted': '0',
            'actual': '1',
            'eventName': 'PH_DEVICE_LOADING_ABORTED'
          },
          {
            'excepted': '0',
            'actual': '1',
            'eventName': 'PH_PAUSING_ABORTED'
          },
          {
            'excepted': '0',
            'actual': '1',
            'eventName': 'RECIPE_HOLD_STARTED'
          }
        ],
        '21': [
          {
            'excepted': '0',
            'actual': '1',
            'eventName': 'PH_DEVICE_LOADING_ABORTED'
          },
          {
            'excepted': '0',
            'actual': '1',
            'eventName': 'TESTPROGRAM_BINDING_ABORTED'
          },
          {
            'excepted': '0',
            'actual': '1',
            'eventName': 'TESTPROGRAM_STARTING_ABORTED'
          }
        ]
      }

      const params = {
        'projectId': this.projectId,
        'jsonCode': this.jsonCode
      }

      // Event详情统计
      this.$refs.event1.chart.showLoading()
      const keys = Object.keys(data)
      this.Event1.xAxis.data = keys
      const series = []
      for (let index = 0; index < keys.length; index++) {
        const key = keys[index]
        const arr = data[key]
        for (let j = 0; j < arr.length; j++) {
          const item = arr[j]
          const tmp = {
            name: item.eventName,
            type: 'bar',
            stack: 'total',
            barWidth: '70%',
            itemStyle: {
            // 设置柱状图颜色
              color: colors[item.eventName]
              // width: '70%'
            },
            label: {
              show: true,
              formatter: (params) => {
                if (params.value !== 0) {
                  var chartWidth = this.$refs.event1.chart.getWidth()
                  var barWidth = chartWidth / (keys.length + 2)
                  var text = params.seriesName
                  var fontSize = 12 // 默认字体大小
                  // 计算文字宽度
                  const canvas = document.createElement('canvas')
                  const context = canvas.getContext('2d')
                  context.font = fontSize || '16px Arial'
                  const textWidth = context.measureText(text).width
                  // 如果文字宽度大于柱子宽度，则截断文字
                  if (textWidth > barWidth) {
                    text = text.substring(0, Math.floor(barWidth / fontSize)) + '...'
                  }
                  return text
                  // return params.seriesName
                } else {
                  return ''
                }
              }
            },
            data: [item.actual]
          }
          tmp.data = []
          for (let k = 0; k < keys.length - 1; k++) {
            tmp.data.push(0)
          }
          tmp.data[index] = 1
          series.push(tmp)
        }
      }
      this.Event1.series = series
      this.$refs.event1.initChart(this.Event1)
      this.$refs.event1.chart.hideLoading()

      // Event数量统计
      this.$refs.event2.chart.showLoading()
      this.Event2.xAxis.data = keys
      const series1 = []
      for (let index = 0; index < keys.length; index++) {
        const key = keys[index]
        const arr = data[key]
        for (let j = 0; j < arr.length; j++) {
          const item = arr[j]

          const tmp = {
            name: item.eventName,
            type: 'bar',
            stack: 'total',
            barWidth: '70%',
            itemStyle: {
              fontSize: 14,
              // 设置柱状图颜色
              color: colors[item.eventName]
            },
            label: {
              fontSize: 14,
              show: true,
              formatter: (params) => {
                if (params.value !== 0) {
                  return params.data.value
                } else {
                  return ''
                }
              }
            },
            data: []
          }
          tmp.data = []
          for (let k = 0; k < keys.length - 1; k++) {
            tmp.data.push(0)
          }

          // 将颜色设置进入data，用于判断是否存在重复色块
          tmp.data[index] = { 'color': colors[item.eventName], 'value': 1 }

          const i = series1.findIndex(data => {
            // 找到每组有数据的小标与index对比，如果为同一组，且存在重复色块，则不进行添加
            const dI = data.data.findIndex(d => d !== 0)
            if (dI === index) {
              if (data.itemStyle.color === colors[item.eventName]) {
                data.data[dI].value++
              }
              return data.itemStyle.color === colors[item.eventName]
            }
          })
          if (i === -1) {
            series1.push(tmp)
          }
        }
      }
      this.Event2.series = series1
      this.$refs.event2.initChart(this.Event2)
      this.$refs.event2.chart.hideLoading()
    },
    async getTemp() {
      // const data1 = {
      //   'site2': {
      //     'upperLimit': 25.25, // 上限
      //     'lowerLimit': 24.75, // 下限
      //     'average': '25', // 平均
      //     'setUp': '25', // 设置
      //     'data': [
      //       24.9,
      //       {
      //         value: '-',
      //         symbol: 'path://M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0z m238.933 699.733c8.534 8.534 8.534 34.134 0 42.667-8.533 8.533-34.133 17.067-42.666 0L512 554.667 315.733 750.933c-8.533 8.534-34.133 8.534-42.666 0-8.534-8.533-8.534-34.133 0-42.666l196.266-187.734L273.067 332.8c-8.534-8.533-8.534-34.133 0-42.667 8.533-8.533 34.133-8.533 42.666 0L512 486.4l196.267-196.267c8.533-8.533 34.133-8.533 42.666 0 8.534 8.534 8.534 34.134 0 42.667L554.667 512l196.266 187.733z',
      //         symbolSize: 15,
      //         itemStyle: { // 数据级个性化折线样式
      //           normal: {
      //             color: '#ccc'
      //           }
      //           // emphasis: {
      //           //   color: 'orange',
      //           //   label: {
      //           //     show: true,
      //           //     position: 'inside',
      //           //     textStyle: {
      //           //       fontSize: '20'
      //           //     }
      //           //   }
      //           // }
      //         }
      //       },
      //       // 24.9,
      //       25,
      //       25,
      //       25,
      //       24.9,
      //       24.9,
      //       24.9,
      //       25,
      //       25.1,
      //       25.1,
      //       25.1,
      //       25.1,
      //       25.1,
      //       25,
      //       25,
      //       25.1,
      //       24.9,
      //       24.9,
      //       24.9
      //     ]
      //   },
      //   'site4': {
      //     'upperLimit': 25.25,
      //     'lowerLimit': 24.75,
      //     'average': '25',
      //     'setUp': '24.95',
      //     'data': [
      //       25.1,
      //       25,
      //       25,
      //       24.9,
      //       24.9,
      //       24.9,
      //       24.9,
      //       24.9,
      //       24.9,
      //       24.9,
      //       25,
      //       24.9,
      //       24.9,
      //       25,
      //       25,
      //       25,
      //       25.1,
      //       24.9,
      //       24.9
      //     ]
      //   }
      // }
      const params = {
        'projectId': this.projectId,
        'jsonCode': this.jsonCode
      }
      const data = await this.$fetchData(this.$api.JsonDashController.getSitesTemp, params, 'post')
      if (Object.keys(data).length === 0) {
        this.isTemp = false
      } else {
        this.isTemp = true
      }
      this.TempData = data
      this.$nextTick(() => {
        let i = 0
        for (const [key, value] of Object.entries(this.TempData)) {
          const tempData = JSON.parse(JSON.stringify(this.temp))
          const data = value.data.map((item) => (item.value === 999 ? { 'tdNo': item.tdNo, 'value': '-' } : { 'tdNo': item.tdNo, 'value': item.value }))
          const values = data.map((item) => item.value)
          const keys = data.map((item) => item.tdNo)
          tempData.series[0].data = values
          tempData.series[1].markLine.data[0].yAxis = value.upperLimit
          tempData.series[2].markLine.data[0].yAxis = value.lowerLimit
          tempData.series[3].markLine.data[0].yAxis = value.setUp
          tempData.series[4].markLine.data[0].yAxis = value.average
          tempData.series[5].data = keys
          tempData.xAxis.data = keys
          // tempData.series[5].data = Array.from({ length: value.data.length }, (_, index) => index + 1)
          // tempData.xAxis.data = Array.from({ length: value.data.length }, (_, index) => index + 1)
          // tempData.yAxis.min = Math.min.apply(null, value.data)
          // tempData.yAxis.max = Math.max.apply(null, value.data)
          tempData.yAxis.max = (value.upperLimit + 0.05).toFixed(2)
          tempData.yAxis.min = (value.lowerLimit - 0.05).toFixed(2)
          // tempData.series[0].name = key
          tempData.title.text = 'Temp in ' + key
          this.$refs.temp[i].initChart(tempData)
          i++
        }
      })
    },
    async getSiteEnable() {
      // const data = {
      //   tdNo: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19],
      //   site1: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1],
      //   site2: [1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1],
      //   site3: [1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1],
      //   site4: [1, 1, 1, 0, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 0, 1, 1, 0, 1],
      //   site5: [1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 0, 1],
      //   site6: [1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 0, 1, 1, 1, 1, 0, 0, 1],
      //   site7: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 0, 1, 0, 0, 1],
      //   site8: [1, 0, 1, 0, 1, 1, 0, 1, 1, 0, 0, 1, 1, 0, 1, 1, 0, 0, 1],
      //   site9: [1, 1, 0, 0, 1, 1, 0, 1, 1, 0, 1, 1, 1, 0, 1, 0, 0, 0, 1],
      //   site10: [1, 0, 1, 0, 1, 0, 1, 1, 1, 0, 0, 1, 0, 1, 1, 1, 0, 0, 1]
      // }
      const params = {
        'projectId': this.projectId,
        'jsonCode': this.jsonCode
      }
      this.$refs.SiteEnable.chart.showLoading()
      const data = await this.$fetchData(this.$api.JsonDashController.getSiteEnable, params, 'post')

      this.SiteEnable.xAxis.data = data.tdNo
      delete data.tdNo
      const dataMap = new Map(Object.entries(data))
      const serviceDatas = []
      let i = 0
      dataMap.forEach((value, key) => {
        let j = 0
        value.forEach((item) => {
          serviceDatas.push([j, i, item])
          j++
        })
        i++
      })
      this.SiteEnable.yAxis.data = [...dataMap.keys()]
      this.SiteEnable.series[0].data = serviceDatas
      this.$refs.SiteEnable.initChart(this.SiteEnable)
      this.$refs.SiteEnable.chart.hideLoading()
    },
    async getKpa() {
      // const data = [136.34,
      //   136.34,
      //   136.34,
      //   136.34,
      //   136.34,
      //   136.34,
      //   136.34,
      //   136.34,
      //   136.34,
      //   136.34,
      //   136.34,
      //   136.34,
      //   136.34,
      //   136.34,
      //   136.34,
      //   136.34,
      //   136.34,
      //   136.34,
      //   136.34]
      const params = {
        'projectId': this.projectId,
        'jsonCode': this.jsonCode
      }
      const data = await this.$fetchData(this.$api.JsonDashController.getPressure, params, 'post')
      if (data.length === 0) {
        this.isKpa = false
      } else {
        this.isKpa = true
      }

      const values = data.map((item) => item.value)
      const keys = data.map((item) => item.tdNo)
      const res = values.reduce((res, c) => {
        res[c] ? res[c]++ : res[c] = 1
        return res
      }, {})
      this.KpaPie.series[0].data = Array.from(Object.entries(res), ([key, value]) => ({ value: value, name: key }))
      this.KpaLine.series[0].data = values
      // this.KpaLine.xAxis.data = Array.from({ length: data.length }, (_, index) => index + 1)
      this.KpaLine.xAxis.data = keys
      this.KpaLine.yAxis.min = Math.min.apply(null, values) - 1
      this.KpaLine.yAxis.max = Math.max.apply(null, values) + 1
      this.$refs.KpaLine.initChart(this.KpaLine)
      this.$refs.KpaPie.initChart(this.KpaPie)
    },
    async getTestTime() {
      // const data = {
      //   'overAll': {
      //     'average': '11.57',
      //     'data': [2, 7, 10, 10, 12, 10, 10, 8, 10, 9, 10, 10, 10, 9, 15, 11, 58, 1, 8]
      //   },
      //   'testFlow': {
      //     'average': '1.26',
      //     'data': [2, 1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 1, 1]
      //   }
      // }
      const params = {
        'projectId': this.projectId,
        'jsonCode': this.jsonCode
      }
      const data = await this.$fetchData(this.$api.JsonDashController.getTestTime, params, 'post')
      // const values =  data.testFlow.data.map((item) => item.value)
      const keys = data.testFlow.data.map((item) => item.tdNo)
      this.TestTime.series[0].data = data.testFlow.data.map((item) => item.value)
      this.TestTime.series[1].markLine.data[0].yAxis = data.testFlow.average
      this.TestTime.series[2].data = data.overAll.data.map((item) => item.value)
      this.TestTime.series[3].markLine.data[0].yAxis = data.overAll.average
      this.TestTime.xAxis.data = keys
      // this.TestTime.xAxis.data = Array.from({ length: data.overAll.data.length }, (_, index) => index + 1)
      this.$refs.TestTime.initChart(this.TestTime)
    },
    async getYield() {
      const params = {
        'projectId': this.projectId,
        'jsonCode': this.jsonCode
      }
      this.$refs.yield.chart.showLoading()
      // const data = await this.$fetchData(this.$api.JsonDashController.getSiteEnable, params, 'post')
      const data = [
        {
          'tdNo': 1,
          'value': '0.00'
        },
        {
          'tdNo': 2,
          'value': '50.00'
        },
        {
          'tdNo': 3,
          'value': '66.67'
        },
        {
          'tdNo': 4,
          'value': '75.00'
        },
        {
          'tdNo': 5,
          'value': '80.00'
        },
        {
          'tdNo': 6,
          'value': '83.33'
        },
        {
          'tdNo': 7,
          'value': '85.71'
        },
        {
          'tdNo': 8,
          'value': '87.50'
        },
        {
          'tdNo': 9,
          'value': '88.89'
        },
        {
          'tdNo': 10,
          'value': '90.00'
        },
        {
          'tdNo': 11,
          'value': '90.91'
        }
      ]
      const values = data.map((item) => item.value)
      const keys = data.map((item) => item.tdNo)
      this.Yield.series[0].data = values
      this.Yield.xAxis.data = keys
      this.$refs.yield.initChart(this.Yield)
      this.$refs.yield.chart.hideLoading()
    }
  }

}
</script>

<style lang="scss" scoped>
  .dashboard{
    // background-color:  #0f375f;
  }
  .event-div{
    width:97%;
    margin:10px;
    display:flex;
    flex-wrap: wrap;
    border-radius: 8px;
    background:white;
    box-shadow: rgba(0, 0, 0, 0.5) 2px 2px 2px 0px;
    .event-div-num{
      display:flex;width: 100%;
      .event-div-left{
        width: 85%;
      }
      .event-div-right{
        width: 15%;
        margin-top: 50px;
        display: flex;
        flex-direction: column;
        align-content: space-around;
        justify-content: flex-start;
        margin-bottom: 30px;
        .svg-container{
          font-size: 12px;
          line-height: 20px;
        }
        .svg-icon{
          width: 3em;
        }
      }
    }
  }
  .kpa-div{
    width:97%;
    margin:10px;
    display:flex;
    flex-wrap: wrap;
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.5) 2px 2px 2px 0px;
  }
  .temp-div{
    margin:10px;
    width:97%;
    background:white;
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.5) 2px 2px 2px 0px;
    .temp-div-head{
      width:100%;
      display:flex;
      margin-top:20px;
      justify-content: center;
      .svg-container{
        margin: 0 10px;
      }
    }
    .temp-content{
      width:100%;
      background:white;
      display:flex;
      flex-wrap: wrap;
      border-radius: 8px;
    }
  }
</style>
